<template>
  <div class="container page">

    <!-- <p style="text-align:center;margin-top:300rpx;" @click="a">首页</p> -->

    <div>
<!--      <img style="width:100%;" :src="imgs[0].url"  mode="widthFix" alt="">-->
<!--      <img style="width:100%;" :src="imgs[1].url"  mode="widthFix" alt="">-->

<swiper indicator-dots="indicatorDots" class="swiper" style="width:100%;height:480rpx;" autoplay="true" circular="true" interval="5000" duration="1000">
    <block v-for="(item, index) in movies" :index="index" :key="key">
        <swiper-item>
            <!-- <image :src="item.url" class="slide-image" mode="aspectFill"/> -->
            <image :src="item.url" style="width:100%;height:480rpx;" mode="aspectFill"/>
        </swiper-item>
    </block>
</swiper>
            <img style="width:100%;" :src="imgs[7].url"  mode="widthFix" alt="">
      <div style="text-align: center;margin-bottom: 20rpx;font-size: 12px">
        <p>华人耀源于创始人袁健达先生</p>
        <p>强烈的民族自信心与自豪感</p>
        <p>本着“发现中华好物 传播中华精神”的使命初心</p>
        <p>旨在成为一个</p>
        <p>专注为中产阶级提供高品质产品与服务的</p>
        <p>新零售平台</p>
      </div>

        <!-- <ul><img src="https://www.hatchdo.com/wxmini/Index/index1.png" class="sy1" style="height: 500rpx" /></ul>
        <p style="margin:40rpx 0"></p> -->


<!--        <p style="margin:45rpx 0"></p>-->
<!--        <ul style="padding:30rpx" @click="goSales(1)"><img src="https://www.hatchdo.com/wxmini/Index/5.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <p style="margin:15rpx 0"></p>-->
<!--        <ul style="padding:30rpx" @click="goSales(2)"><img src="https://www.hatchdo.com/wxmini/Index/2.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <p style="margin:15rpx 0"></p>-->
<!--        <ul style="padding:30rpx"><img src="https://www.hatchdo.com/wxmini/Index/3.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <p style="margin:15rpx 0"></p>-->

<!--        <ul style="padding:30rpx" @click="productChoose(40)"><img src="https://www.hatchdo.com/wxmini/Index/05.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(43)"><img src="https://www.hatchdo.com/wxmini/Index/06.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(45)"><img src="https://www.hatchdo.com/wxmini/Index/07.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(44)"><img src="https://www.hatchdo.com/wxmini/Index/08.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(51)"><img src="https://www.hatchdo.com/wxmini/Index/09.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(50)"><img src="https://www.hatchdo.com/wxmini/Index/10.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(52)"><img src="https://www.hatchdo.com/wxmini/Index/11.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(41)"><img src="https://www.hatchdo.com/wxmini/Index/12.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(42)"><img src="https://www.hatchdo.com/wxmini/Index/13.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(47)"><img src="https://www.hatchdo.com/wxmini/Index/14.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(48)"><img src="https://www.hatchdo.com/wxmini/Index/15.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--        <ul style="padding:30rpx" @click="productChoose(49)"><img src="https://www.hatchdo.com/wxmini/Index/16.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->

      <!--三个白酒-->
<!--      <ul @click="productChoose(59)"><img :src="imgs[4].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--      <ul @click="productChoose(60)"><img :src="imgs[5].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--      <ul @click="productChoose(61)"><img :src="imgs[6].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->

      <div @click="goShop" style="background-color: #f7f7f7;margin:0 50rpx;text-align: center;font-size: 12px">
        <p style="font-size: 20px;padding: 30rpx">华人耀.产品系列</p>
        <div style="display: flex">
          <p @click="productChoose(59)" style="flex: 1"><img style="width:60%;" :src="imgs[10].url"  mode="widthFix" alt=""></p>
          <p @click="productChoose(60)" style="flex: 1"><img style="width:60%;" :src="imgs[11].url"  mode="widthFix" alt=""></p>
          <p @click="productChoose(61)" style="flex: 1"><img style="width:60%;" :src="imgs[12].url"  mode="widthFix" alt=""></p>
        </div>
        <div style="display: flex;padding-bottom: 30rpx;">
          <p @click="productChoose(59)" style="flex: 1">耀自天成·鉴赏版</p>
          <p @click="productChoose(60)" style="flex: 1">耀自天成·珍藏版</p>
          <p @click="productChoose(61)" style="flex: 1">耀自天成·秘藏版</p>
        </div>
        <div style="display: flex">
          <p @click="productChoose(165)" style="flex: 1"><img style="width:60%;" :src="imgs[13].url"  mode="widthFix" alt=""></p>
          <p @click="productChoose(167)" style="flex: 1"><img style="width:60%;" :src="imgs[14].url"  mode="widthFix" alt=""></p>
          <p @click="productChoose(166)" style="flex: 1"><img style="width:60%;" :src="imgs[15].url"  mode="widthFix" alt=""></p>
        </div>
        <div style="display: flex;padding-bottom: 30rpx;">
          <p @click="productChoose(165)" style="flex: 1">耀自天成·鉴赏版<br>小酱酒</p>
          <p @click="productChoose(167)" style="flex: 1">耀自天成·珍藏版<br>小酱酒</p>
          <p @click="productChoose(166)" style="flex: 1">耀自天成·秘藏版<br>小酱酒</p>
        </div>
        <div style="display: flex;">
          <p @click="productChoose(168)" style="flex: 1"><img style="width:60%;" :src="imgs[16].url"  mode="widthFix" alt=""></p>
          <p @click="productChoose(163)" style="flex: 1"><img style="width:60%;" :src="imgs[17].url"  mode="widthFix" alt=""></p>
          <p @click="goShop" style="flex: 1"><img style="width:60%;" :src="imgs[18].url"  mode="widthFix" alt=""></p>
        </div>
        <div style="display: flex;padding-bottom: 50rpx;">
          <p @click="productChoose(168)" style="flex: 1">耀自天成·小酱酒<br>全家福</p>
          <p @click="productChoose(163)" style="flex: 1">喜耀临门</p>
          <p @click="goShop" style="flex: 1">更多</p>
        </div>
      </div >

<!--      <ul style="padding:30rpx" @click="goSales(1)"><img :src="imgs[2].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
<!--      <p style="margin:15rpx 0"></p>-->
<!--      <ul style="padding:30rpx" @click="goSales(2)"><img :src="imgs[3].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>-->
      <ul @click="goSales(1)"><img :src="imgs[8].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>
<!--      <p style="margin:15rpx 0"></p>-->
      <ul @click="goSales(2)"><img :src="imgs[9].url" class="sy1" style="width:100%;" mode="widthFix" /></ul>
        <p style="margin:40rpx 0"></p>
        <!-- <ul style="padding:0 30rpx"><img src="https://www.hatchdo.com/wxmini/Index/shouye3.png" class="sy1" style="height: 150rpx;" /></ul>
        <p style="margin:20rpx 0"></p> -->
        <!-- <ul style="padding:0 30rpx"><img src="https://www.hatchdo.com/wxmini/Index/shouye4.png" class="sy1" style="height: 30rpx;" /></ul>
        <p style="margin:20rpx 0"></p>
        <ul style="padding:30rpx"><img src="https://www.hatchdo.com/wxmini/Index/shouye5.png" class="sy1" style="height: 500rpx;" /></ul>
        <p style="margin:140rpx 0"></p> -->
    </div>


  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
  },
  data () {
    return {
      indicatorDots: true,
      imgs: [
        {'url':`${config.imghost}index/index1.png`},
        {'url':`${config.imghost}index/index2.png`},
        {'url':`${config.imghost}index/index3.png`},
        {'url':`${config.imghost}index/index4.png`},
        {'url':`${config.imghost}index/index5.png`},
        {'url':`${config.imghost}index/index6.png`},
        {'url':`${config.imghost}index/index7.png`},
        {'url':`${config.imghost}index/index11.png`},
        {'url':`${config.imghost}index/index12.png`},
        {'url':`${config.imghost}index/index13.png`},
        {'url':`${config.imghost}index/p1.png`},
        {'url':`${config.imghost}index/p2.png`},
        {'url':`${config.imghost}index/p3.png`},
        {'url':`${config.imghost}index/p5.png`},
        {'url':`${config.imghost}index/p6.png`},
        {'url':`${config.imghost}index/p7.png`},
        {'url':`${config.imghost}index/p8.png`},
        {'url':`${config.imghost}index/p9.png`},
        {'url':`${config.imghost}index/p10.png`}
      ],
      movies:[
        {'url':`${config.imghost}index/banner01.png`},
        {'url':`${config.imghost}index/banner02.png`},
        {'url':`${config.imghost}index/banner03.png`},
        {'url':`${config.imghost}index/banner04.png`},
        {'url':`${config.imghost}index/banner05.png`}
        // {'url':'https://www.hatchdo.com/wxmini/banner/1.png'},
        // {'url':'https://www.hatchdo.com/wxmini/banner/2.png'},
        // {'url':'https://www.hatchdo.com/wxmini/banner/3.png'},
        // {'url':'https://www.hatchdo.com/wxmini/banner/4.png'},
        // {'url':'https://www.hatchdo.com/wxmini/banner/5.png'}
      ],
      tabA: 0,
      productList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `华人耀酱香型白酒，传承古法工艺，与国酒茅台同宗同源同品。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    goSales(x){
      wx.navigateTo({
        url: `/pages/sales/main?sale=${x}`
      })
    },
    goShop(){
      wx.switchTab({
        url: `/pages/home/main`
      })
    },
    productChoose(x){
      wx.navigateTo({
        url: "/pages/product-detail/main?id="+x
      })
    },
    a() {
      wx.requestPayment(
      {
      // 'appId': 'wxa13b77d438fbf138',
      'timeStamp': '1563954884',
      'nonceStr': 'd4XYKlZkpJNY4GZiagAKzoTgYi7aRto0',
      'package': 'prepay_id=wx241554461048331ca6c0ab091510446800',
      'signType': 'MD5',
      'paySign': '61F3C1E4F3A32E2A16631B7190F3A42E',
      'success':function(res){
        console.log('成功')

      },
      'fail':function(res){
        console.log('失败')

      },
      'complete':function(res){
        console.log('完成')

      }
      })
    },
    chooseTab(x) {
      this.tabA = x;
      if(x === 0) {
        this.get_product("");
      } else {
        this.get_product(x);
      }
    },
    async get_product(categoryId) {
      return await get(`geweb/product/get_productlist?categoryId=${categoryId}`, {}).then(result => {
        console.log(result.res)
        this.productList = result.res;
      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }

  },
  onShow () {
    // this.get_product("")
    // console.log('1',this.$root.$mp.query.scene)
    // console.log('query',this.$root.$mp.query)

    // console.log('2',decodeURIComponent(this.$root.$mp.query.scene))



    // if (decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[0].split("shareid=")[1]) {
    //   wx.setStorageSync('scene', decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[0])
    //   wx.setStorageSync('id', decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[1])
    // }
    // console.log('scene',wx.getStorageSync('scene').split("shareid=")[1])


    // if(wx.getStorageSync('id') === decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[1]){

    // console.log('11111')
    //     wx.setStorageSync('id','')
    //     this.productChoose(decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[1])

    // } else {
    //   console.log('22222')

    // }

    // v1.0
    // if (decodeURIComponent(this.$root.$mp.query.scene).split("shareid=")[1]) {
    //   wx.setStorageSync('scene', decodeURIComponent(this.$root.$mp.query.scene))
    // }
    // console.log('scene',wx.getStorageSync('scene').split("shareid=")[1])
  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}

.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}
.sy1{
    width: 100%
}
</style>
